<template>
  <div>
    <a-tag
      v-for="item in state.items"
      :key="item.dictKey"
      :color="item.icon"
    >
      {{ item.dictValue }}
    </a-tag>
  </div>
</template>
<script lang="ts" setup name="zh-table-tag">
const props = defineProps({
	modelValue: {
		type: [String,Number],
		default: "",
	},
  dictList: {
    type: Array,
    default: ()=>{
      return []
    },
  }
});
const emits = defineEmits(["update:modelValue"]);
const state=reactive({
    items:[],	
})
const getItems = () => {
  if(props.modelValue==null||props.modelValue==undefined||props.modelValue===""){
    return;
  }
  let colorList=["#3B5CF0","#ff2414","#ea2a6a","#9C27B0","#673AB7","#3F51B5","#2196F3","#03A9F4","#00BCD4","#009688","#4ec752","#8BC34A","#CDDC39","#ffe814","#FFC107","#ffa114","#FF5722","#795548","#607D8B","#9E9E9E"]
  let dictValueList = (props.modelValue.toString()).split(",")
  let itemList=[]
  if(dictValueList.length>0){
    if(dictValueList.length==1){
      if(props.dictList.length>0){
        let item=null;
        let cnt=0;
        let colorIndex=0;
        for(let i=0;i<props.dictList.length;i++){
          colorIndex=i;
          if(props.dictList[i].dictKey===dictValueList[0]){
            item=props.dictList[i];
            if(!item.icon){
              item.icon=colorList[i-20*cnt]
            }
          }
          if(colorIndex==20){
            cnt=1
            colorIndex=0
          }
        }
        if(item){
          itemList.push(item)
        }else{
          itemList.push({dictKey:dictValueList[0],dictValue:dictValueList[0],icon:colorList[0]})
        }
      }else{
        itemList.push({dictKey:dictValueList[0],dictValue:dictValueList[0],icon:colorList[0]})
      }
    }else{
      let cnt=0;
      let colorIndex=0;
      for(let i=0;i<dictValueList.length;i++){
        let item =null;
        if(props.dictList.length>0){
          item=props.dictList.find((item:any)=>{
            return item.dictKey==dictValueList[i]
          })
        }else{
          item={dictKey:dictValueList[i],dictValue:dictValueList[i],icon:colorList[i-20*cnt]}
        }
        colorIndex=i;
        
        if(item){
          if(!item.icon){
            item.icon=colorList[i-20*cnt]
          }
          itemList.push(item)
        }else{
          itemList.push({dictKey:dictValueList[i],dictValue:dictValueList[i],icon:colorList[i-20*cnt]})
        }
        if(colorIndex==20){
          cnt=1
          colorIndex=0
        }
      }
    }
  }
  state.items=itemList
}
getItems();
watch(
    () => props.modelValue,
    (val) => {
      getItems();
    }
)
watch(
    () => props.dictList,
    (val) => {
      getItems();
    },{
      deep:true
    }
)
</script>